<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:cu="http://javaserverfaces.dev.java.net/gaadi/feature-taglib">
    
    <script type="text/javascript">
	$(document).ready(function(){
		$('a#forgotpasslink').click(
			function(){showTOC();
		});

		//variable to reference window
        $myWindow = jQuery('#passwordforgot');

        //instantiate the dialog
        $myWindow.dialog({
                modal: true,
                position: 'center',
                autoOpen:false,
                title:'My ad - Password Assistance',
                overlay: { opacity: 0.5, background: 'black'}
       });
        
	});

	function showTOC(){
		$('#passwordforgot').dialog("open");
	}
	</script>
	
	<c:if test="#{flow.flow}">
		<div class="progressBar">
			<ul class="">
				<li>
					<span class="counter listing"></span>
					<span class="countertext">Listing</span>			
				</li>
			    <li class="active">
			    	<span class="contact counter bg104"></span>
					<span class="countertext">Contact</span>		    
			    </li>
					<li>
						<span class="counter options bg312"></span>
						<span class="countertext">Options</span>
					</li>
				<li>
					<span class="counter pictures bg520"></span>
					<span class="countertext">Pictures</span>
				</li>
				<li>
					<span class="counter verify bg728"></span>
					<span class="countertext">Verify</span>
				</li>
				<li id="online">
					<span class="counter online bg1144"></span>
					<span class="countertext">Online</span>
				</li>
			</ul>
		</div>
	</c:if>
		
	<div id="logindivs">
    <div style="clear:both"/>
    <h:messages globalOnly="true" errorClass="globalerror" infoClass="globalconfirmation" layout="list" />
	
	<!-- <f:event type="postValidate"  listener="#{loginBean.validate}"/>  -->
	<div class="box" style="padding:10px 0">
			<div class="greybox box2" style="height:180px;">
				<div class="box-content">
					<div class="row headline login">
						<h2> Already a Customer?</h2>
					</div>
					<h:form id="form" prependId="false" onsubmit="return checkForm(this, '#{cc.clientId}')">
					<div class="content_inner">
						<div  style="min-height:80px;">
							<div class="cols2">
								<div class="col-content">
									<strong><h:outputLabel for="userName" value="username:"/></strong>&#160;&#160;&#160;&#160;
									<h:inputText id="userName" value="#{loginBean.userName}" required="true" requiredMessage="value is required" >
										<f:ajax render="nameError"/>
									</h:inputText><br></br>
									<h:message  for="userName" errorClass="error"/>
									<h:outputText id="nameError" value="#{loginBean.nameError}" styleClass="error"/>
								</div>
								<div class="col-content">
									<h:outputLabel for="password" value="password:" />
									<h:inputSecret id="password" value="#{loginBean.password}" required="true" requiredMessage="Required!!"/>
									<h:message for="password" errorClass="error"/>
								</div>
							</div>
							<div class="cols1">
								<div class="col-content"><a id="forgotpasslink" href="#">Forgotten Your Password?</a></div>
							</div>
						</div>
						<div class="row bottom">
							<div class="col-content" style=""><h:panelGroup style="display:block; text-align:center;">
	                                <h:commandButton type="submit" id="login" action="#{loginBean.login}" value="login" onclick="$(this).focus();"/>                              
	                        </h:panelGroup></div>
						</div>
					</div>
					</h:form>
				</div>		
			</div>
		
		<div class="clear"/>
	</div>
	
	<div class="separator line"/>
	
	<h:form id="back">
	<h:commandButton type="submit" id="back" action="#{carSession.backData}" value="#{msg['button.back']}" rendered="#{flow.flow}"/></h:form>
	</div>
	
	<!-- Register Div -->
	<div id="passwordforgot" style="display:none">
		<div class="box-content">
			<h:form id="lostpass" prependId="false">
					<div class="content_inner">
							<div class="cols1">
								<div class="col-content" style="padding:30px 0 10px 0">
									<strong><h:outputLabel for="userName" value="email:      "/></strong>
									<h:inputText id="emailforgot" value="" required="true" >
									</h:inputText>
									<h:message  for="emailforgot" errorClass="error"/>
								</div>
							</div>
						<div class="row bottom">
							<div class="col-content" style=""><h:panelGroup style="display:block; text-align:center;">
	                                <h:commandButton type="submit" id="forgotpass" action="#{loginBean.doRecoverLostPassword}" value="submit" />                              
	                        </h:panelGroup></div>
						</div>
					</div>
			</h:form>
		</div>		
	</div>
</ui:composition>